<template>
    <div>
        <el-row style="margin-bottom:20px;display: flex">
            <el-button icon="el-icon-plus" size="small" type="primary" @click="clickAdd">新增客服</el-button>
        </el-row>
        <el-dialog title="新增客服信息" :visible.sync="dialogFormVisible" width="500px" >
            <el-form :model="form">
                <el-form-item label="账号" label-width="90px">
                    <el-input v-model="form.account" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="客服姓名" label-width="90px">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号" label-width="90px">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" label-width="90px">
                    <el-input v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addKefu">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改客服信息" :visible.sync="dialogFormVisible2" width="500px" >
            <el-form :model="form">
                <el-form-item label="账号" label-width="90px">
                    <el-input v-model="form.account" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="姓名" label-width="90px">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号" label-width="90px">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" label-width="90px">
                    <el-input v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="updateKefu">确 定</el-button>
            </div>
        </el-dialog>
        <el-container>
            <el-aside width="20px"></el-aside>
            <el-main>
                <el-table :data="tableData" border>
                    <el-table-column
                            prop="email"
                            label="账号"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="cname"
                            label="客服姓名"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="cphone"
                            label="手机号"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="password"
                            label="密码"
                            width="200">
                    </el-table-column>
                    <el-table-column label="操作" width="250">
                        <template slot-scope="scope">
                            <el-button
                                    style="margin-right: 10px"
                                    size="mini"
                                    @click="xiugai(scope.row)">修改</el-button>
                            <el-popconfirm title="确定删除该客服账号吗？" @confirm="handleDelete(scope.row)">
                                <el-button
                                        slot="reference"
                                        type="danger"
                                        size="mini">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>

                </el-table>
            </el-main>
        </el-container>

        <br><br>
    </div>
</template>

<script>
export default {
    name: "kefu",
    data() {
        return {
            dialogFormVisible: false,
            dialogFormVisible2: false,
            form:{
                uid:'',
                account:'',
                name:'',
                phone:'',
                password:'',
            },
            tableData: [],
        }
    },
    created() {
        this.getKefuList();
    },
    methods : {
        handleDelete(row){
            let vm = this;
            this.axios({
                url: '/myapi/customer/customerMessage/delectCustomer/'+row.uid,
                method: 'delete'
            }).then(function (response) {
                if(response.data.success === true){
                    vm.$message({
                        message: '删除成功!',
                        type: 'success'
                    });
                    vm.getKefuList();
                }
                else {
                    vm.$message.error('删除失败');
                }
            });
        },
        addKefu(){
            let vm = this;
            this.axios({
                url: '/myapi/customer/customerMessage/addCustomer',
                method: 'post',
                data:{
                    email:vm.form.account,
                    cname:vm.form.name,
                    cphone:vm.form.phone,
                    password:vm.form.password
                }
            }).then(function (response) {
                if(response.data.success === true){
                    vm.$message.success('新增成功');
                    vm.getKefuList();
                    vm.dialogFormVisible = false;
                }
                else {
                    vm.$message.error('添加失败');
                    vm.getKefuList();
                    vm.dialogFormVisible = false;
                }
            });

        },
        clickAdd:function(){
            this.form.uid = '';
            this.form.account = '';
            this.form.name = '';
            this.form.phone = '';
            this.form.password = '';
            this.dialogFormVisible = true;
        },
        updateKefu(){
            let vm = this;
            this.axios({
                url: '/myapi/customer/customerMessage/updateCustomer',
                method: 'put',
                data:{
                    uid:vm.form.uid,
                    email:vm.form.account,
                    cname:vm.form.name,
                    cphone:vm.form.phone,
                    password:vm.form.password
                }
            }).then(function (response) {
                if(response.data.success === true){
                    vm.$message.success('修改成功');
                    vm.getKefuList();
                    vm.dialogFormVisible2 = false;
                }
                else {
                    vm.$message.error('更新失败');
                }
            });
        },
        xiugai:function(row){
            this.form.uid = row.uid;
            this.form.account = row.email;
            this.form.name = row.cname;
            this.form.phone = row.cphone;
            this.form.password = row.password;
            this.dialogFormVisible2 = true;
        },
        getKefuList(){
            let vm = this;
            this.axios({
                url: '/myapi/customer/customerMessage/listCustomer',
                method: 'get'
            }).then(function (response) {
                if(response.data.success === true){
                    vm.tableData = response.data.content;
                    console.log(vm.tableData);
                }
                else {
                    vm.$message.error('获取客服账号列表失败');
                }
            });
        }
    }
}
</script>

<style scoped>
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    width: 480px;
}
.el-aside {
    text-align: center;
    line-height: 200px;
}
.el-main {
    text-align: center;
}
</style>
